<template>
  <view class="p-l-30 p-r-30">
    <u-sticky>
      <u-search bgColor="#FBF8F8" placeholder="输入文件名查询" shape="square" :showAction="false" v-model="keyword" @search="getLists" @clear="getLists"></u-search>
    </u-sticky>
    <view class="m-t-40 flex flex-wrap">
      <view class="item m-r-10" v-for="(item,i) in lists" :key="i" @click="jump(`/views/user/qualification/detail?id=${item.id}`)">
        <view class="item_img flex-center">
          <image style="width: 100%;height: 180rpx;" mode="aspectFit" :src="item.file_url" v-if="getFileType(item.file_url) == 'image'"/>
          <image class="w-116 h-116" src="@/static/images/file-type/ic_word@2x.png" v-else-if="getFileType(item.file_url) == 'word'"/>
          <image class="w-116 h-116" src="@/static/images/file-type/ic_excel@2x.png" v-else-if="getFileType(item.file_url) == 'excel'"/>
          <image class="w-116 h-116" src="@/static/images/file-type/ic_ppt@2x.png" v-else-if="getFileType(item.file_url) == 'ppt'"/>
          <image class="w-116 h-116" src="@/static/images/file-type/ic_pdf@2x.png" v-else-if="getFileType(item.file_url) == 'pdf'"/>
          <image class="w-116 h-116" src="@/static/images/file-type/ic_yasuobao@2x.png" v-else-if="getFileType(item.file_url) == 'archive'"/>
        </view>
        <view class="item_name m-t-10 line-1 text-center">{{ item.file_name }}</view>
      </view>
    </view>

    <view class="h-200"></view>
    <fixed-bottom :is-fixed="true" bg-color="#fff">
      <view class="p-l-30 p-r-30 p-t-40 p-b-40 yy">
        <view class="btn flex-center" @click="add">新增</view>
      </view>
    </fixed-bottom>
  </view>
</template>

<script>
import getFileType from "../../../utils/file-type";
import {fileToBlobUrl,selectFile} from "../../../utils/file-picker";
import ali from "../../../mixin/ali";

export default {
  data() {
    return {
      keyword:'',
      lists:[]
    };
  },
  mixins:[ali],
  onShow() {
    this.getLists()
  },
  methods: {
    getFileType,
    async add(){
      const res = await selectFile()
      const url = fileToBlobUrl(res[0])
      this.fileUpload('image', url, res[0].name, async (res1) => {
        await this.$api.common.user("doUpload",{
          file_name: res[0].name,
          file_url:res1,
          id:''
        })
        this.getLists()
      })
    },
    async getLists(){
      const res = await this.$api.common.user("getFileList",{
        page:1,
        limit: 9999,
        file_name: this.keyword
      })
      this.lists = res.data.list
    },
  },
}
</script>

<style lang="scss">
page{
  background: #ffffff;
}

.item{
  width: 224rpx;
  .item_img{
    width: 100%;
    height: 180rpx;
    background: #FBF8F8;
    border-radius: 24rpx;
    overflow: hidden;
  }
  .item_name{
    font-weight: 500;
    font-size: 24rpx;
    color: #333333;
  }
}

.item:nth-child(3n){
  margin-right: 0rpx !important;
}

.btn{
  width: 688rpx;
  height: 80rpx;
  background: linear-gradient( 117deg, #FE515F 0%, #FB2D19 20%, #FB2D19 59%, #FC7916 100%);
  border-radius: 20rpx;
  font-weight: 500;
  font-size: 28rpx;
  color: #FFFFFF;
}

.yy{
  box-shadow: 0rpx -4rpx 16rpx 0rpx rgba(0,0,0,0.1);
}
</style>
